<template>
  <vie class="template">
    <div class="template-board" @click="boardClickHandle">
      <text class="title">{{ props.title }}</text>
      <div class="question" v-for="index in 3" :key="index">
        <!-- 问题题目 -->
        <text class="text">{{ questionList[index - 1].title }}</text>
        <!-- 文本输入框 -->
        <div class="input" v-if="questionList[index - 1].type === 'inputTextarea'"> </div>
        <!-- 选项 -->
        <div class="radio-group" v-else-if="questionList[index - 1].type === 'radio'">
          <div class="radio" v-for="(item, itemIndex) in questionList[index - 1].options" :key="itemIndex">{{ item.option
          }}
          </div>
        </div>
      </div>
    </div>
    <text class="template-title">{{ props.title }}（简单）</text>
  </vie>
</template>

<script setup lang="ts">
import { navigateTo } from '@/utils/navigate';
import { computed, defineProps, withDefaults, onMounted } from 'vue';

const props = withDefaults(defineProps<{
  id: string,
  index: number,
  title: string,
  categoryQuestionList: CategoryQuestion[]
}>(), {
  index: 0,
  title: '',
  categoryQuestionList: () => []
});

// 所有问题
const questionList = computed(() => {
  return props.categoryQuestionList.map(categoryQuestion => categoryQuestion.questionList).flat();
})

/** 装饰条颜色 */
const barColor = computed(() => {
  const barColorMap = ['#17ce92', '#5555c3', '#EF5576'];
  return barColorMap[props.index % 3];
})

/** 输入框颜色 */
const inputColor = computed(() => {
  const inputColorMap = ['#eefcf7', '#F5F5FF', '#FCF0F4'];
  return inputColorMap[props.index % 3];
})

/** 面板点击事件 */
const boardClickHandle = () => {
  navigateTo('questionnaire-template-preview', {
    templateId: props.id
  })
}

</script>

<style scoped lang="scss">
.template {
  text-align: center;
  display: flex;
  flex-direction: column;

  width: 28.7179vw;

  // 问卷面板
  .template-board {
    background-color: #fff;
    overflow: hidden;

    width: 100%;
    box-sizing: border-box;

    padding: 9px 6px 36px;
    display: grid;
    grid-template:
      'title' 3.5897vw
      'question1' 6.6667vw
      'question2' 6.6667vw
      'question3' 6.6667vw
      /1fr;
    grid-gap: 5px 0;

    position: relative;

    // 顶部的装饰条
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);

      width: 100%;
      height: 2px;
      border-radius: 7px;
      background-color: v-bind('barColor');
    }

    // 问卷模板标题
    .title {
      grid-area: 'title';
      font-size: 10px;
      color: #333333;
    }

    // 问卷问题
    .question {
      grid-area: auto;

      display: grid;

      // 问题题目
      .text {
        font-size: 1.7947vw;
        text-align: LEFT;
        color: #666666;
      }

      // 输入框
      .input {
        width: 25.8973vw;
        height: 3.3333vw;
        border-radius: 1px;
        background-color: v-bind('inputColor');
      }

      // 选项
      .radio-group {
        display: grid;
        grid-auto-flow: column;
        align-items: center;

        .radio {
          font-size: 6px;
          color: #666666;

          position: relative;

          // XXX 这里定位的方法不适配所有的选项，屏幕尺寸可能也会有问题，所以后续需要改进
          // 选项前的小圆点
          &::before {
            position: absolute;
            left: 5px;
            top: 50%;
            transform: translateY(-50%);

            content: '';
            width: 6px;
            height: 6px;
            border-radius: 50%;
            border: 1px solid #CECECE;
          }
        }
      }
    }
  }

  // 标题

  .template-title {
    margin-top: 12px;

    font-size: 13px;
    color: #333;
  }
}
</style>
